<template>
      <el-container style="height: 100%;width: 100%">
          <el-main>
            <el-row :gutter="20" style="width: 100%;height: 100%;">
              <el-col :span="4" style="height: 100%">
                <el-container class="panal">
                  <el-header style="height: 40px;padding-left: 20px;border-bottom: 1px solid rgba(7,118,181,.7);line-height: 40px;font-size: 16px;font-weight: 300">
                    查询条件
                  </el-header>
                  <el-main style="padding: 0">
                        <el-row style="height: 40px;padding-left: 20px;border-bottom: 1px solid rgba(7,118,181,.7);line-height: 40px;font-size: 16px;font-weight: 300">
                                   请选择时间:
                        </el-row>
                         <el-row style="height: 40px;padding-left: 20px;line-height: 40px;font-size: 16px;font-weight: 300">
                           <el-date-picker
                             v-model="value1"
                             type="date"
                             placeholder="选择日期">
                           </el-date-picker>
                         </el-row>
                    <el-row style="height: 40px;padding-left: 20px;border-top: 1px solid rgba(7,118,181,.7);line-height: 40px;font-size: 16px;font-weight: 300;margin-top: 10px">
                      请选择车间:
                    </el-row>
                    <el-row style="padding-left: 20px;border-top: 1px solid rgba(7,118,181,.7);line-height: 40px;font-size: 16px;font-weight: 300">
                      <el-radio-group v-model="radio1">
                        <el-radio-button  label="氯碱车间"></el-radio-button>
                        <el-radio-button label="双氧水车间"></el-radio-button>
                        <el-radio-button label="环氧丙烷车间"></el-radio-button>
                        <el-radio-button label="蒽醌车间"></el-radio-button>
                      </el-radio-group>
                    </el-row>
                    <el-row style="border-top: 1px solid rgba(7,118,181,.7);margin-top: 10px">
                      <el-row style="width: 200px;height: 60px;margin-left: auto;margin-right: auto;">
                        <el-button  type="primary" style="color: white;background-color:#061431; border: 1px solid #1A6288;margin-left: auto;margin-right: auto;width: 200px;margin-top: 20px" >查询</el-button>
                      </el-row>
                      <el-row style="width: 200px;height: 60px;margin-left: auto;margin-right: auto;">
                        <el-button  type="primary" style="color: white;background-color:#061431; border: 1px solid #1A6288;margin-left: auto;margin-right: auto;width: 200px;margin-top: 20px" >导出EXCEL</el-button>
                      </el-row>
                    </el-row>
                  </el-main>
                </el-container>
              </el-col>
              <el-col :span="20" style="height: 100%">
                <el-container class="panal">
                  <el-header style="height: 40px;padding-left: 20px;border-bottom: 1px solid rgba(7,118,181,.7);line-height: 40px;font-size: 16px;font-weight: 300">
                    生产报表详情
                  </el-header>
                  <el-main>
                    <table style="width: 100%">
                      <thead>
                      <tr>
                        <th  colspan="11" style="text-align: center;font-size: 20px;font-weight: bold">氯碱生产日报表</th>
                        <th colspan="5"   style="text-align: center;">时间:2025-03-27</th>
                      </tr>
                      <tr>
                        <th style="text-align: center;">产品名称</th>
                        <th  style="text-align: center;">单位</th>

                        <th  style="text-align: center;" colspan="2">上期盘存</th>
                        <th  style="text-align: center;">本日生产</th>
                        <th  style="text-align: center;">本日折百碱计划产量</th>
                        <th  style="text-align: center;">本日折百碱生产率</th>
                        <th  style="text-align: center;">本月累计生产</th>
                        <th  style="text-align: center;">本月折百碱计划产量(吨)</th>
                        <th  style="text-align: center;">月度生产计划完成率</th>
                        <th  style="text-align: center;color:red">本月累计销售</th>
                        <th  style="text-align: center;">本月本厂自用</th>
                        <th  style="text-align: center;">库存</th>
                        <th  style="text-align: center;" colspan="2">备注</th>
                      </tr>
                      </thead>
                      <tbody style="color: #D2C172;text-align: center">
                         <tr v-for="(item,index) in 10">
                           <td>32%烧碱</td>
                           <td>吨</td>
                           <td colspan="2">937.67</td>
                           <td>937.67</td>
                           <td>937.67</td>
                           <td>937.67</td>
                           <td @click="monthPro">937.67</td>
                           <td>24743.51</td>
                           <td>20634.84</td>
                           <td @click="monthSale" style="cursor: pointer">37.36</td>
                           <td @click="selectSelf" style="cursor: pointer">4822.73</td>
                           <td>4822.73</td>
                           <td colspan="2">环保运行：36.07T，公辅：1.29T，蒽醌：T</td>
                         </tr>
                         <tr>
                           <td>50%烧碱</td>
                           <td>吨</td>
                           <td colspan="2">512.27</td>
                           <td>512.27</td>
                           <td>6210.54</td>
                           <td>937.67</td>
                           <td>937.67</td>
                           <td>937.67</td>
                           <td>7988.02</td>
                           <td>/</td>
                           <td>1705.83</td>
                           <td>4822.73</td>
                           <td colspan="2">环保运行：36.07T，公辅：1.29T，蒽醌：T</td>
                         </tr>
                         <tr style="color: red">
                           <td>根据车间获取</td>
                           <td>吨</td>
                           <td colspan="2">DCS计算</td>
                           <td>DCS计算</td>
                           <td>系统计算</td>
                           <td>物流数据+管道数据</td>
                           <td>输入计算</td>
                           <td>输入计算</td>
                           <td>输入计算</td>
                           <td>输入计算</td>
                           <td>输入计算</td>
                           <td>DCS计算</td>
                           <td colspan="2">无需填写本自用情况</td>
                         </tr>

                      </tbody>
                      <thead>
                      <tr>
                        <th style="text-align: center;">原料名称</th>
                        <th  style="text-align: center;">单位</th>
                        <th  style="text-align: center;color: red">本期仓库结存</th>
                        <th  style="text-align: center;color:red">上月车间结存</th>
                        <th  style="text-align: center;color:red">本期车间收料</th>
                        <th  style="text-align: center;">当日折百碱耗用</th>
                        <th  style="text-align: center;">当日在制品耗用</th>
                        <th  style="text-align: center;">本月累计耗用</th>
                        <th  style="text-align: center;">本期车间结存</th>
                        <th  style="text-align: center;">当日实耗量</th>
                        <th  style="text-align: center;">折百碱本日单耗</th>
                        <th  style="text-align: center;">折百碱本月累耗</th>
                        <th  style="text-align: center;">折百碱上月单耗</th>
                        <th  style="text-align: center;">折百碱计划单耗</th>
                        <th  style="text-align: center;">差值</th>

                      </tr>
                      </thead>
                      <tbody style="color:#D2C172;;">
                      <tr v-for="(item,index) in 10">
                        <td style="text-align: center;">日晒工业盐（海盐）</td>
                        <td  style="text-align: center;">吨</td>
                        <td  style="text-align: center;">8176.23</td>
                        <td  style="text-align: center;">12412.04</td>
                        <td  style="text-align: center;">844.64</td>
                        <td  style="text-align: center;">-6.64</td>
                        <td  style="text-align: center;">10987.20</td>
                        <td  style="text-align: center;">9601.07</td>
                        <td  style="text-align: center;">518.00</td>
                        <td  style="text-align: center;">1.52</td>
                        <td  style="text-align: center;">1.52</td>
                        <td  style="text-align: center;">0.00</td>
                        <td  style="text-align: center;">1.52</td>
                        <td  style="text-align: center;">1.52</td>
                        <td  style="text-align: center;">0.00</td>
                      </tr>
                      <tr>
                        <td style="text-align: center;">日晒工业盐（井矿盐）</td>
                        <td  style="text-align: center;">吨</td>
                        <td  style="text-align: center;">8176.23</td>
                        <td  style="text-align: center;">12412.04</td>
                        <td  style="text-align: center;">844.64</td>
                        <td  style="text-align: center;">-6.64</td>
                        <td  style="text-align: center;">10987.20</td>
                        <td  style="text-align: center;">9601.07</td>
                        <td  style="text-align: center;">518.00</td>
                        <td  style="text-align: center;">1.52</td>
                        <td  style="text-align: center;">1.52</td>
                        <td  style="text-align: center;">0.00</td>
                        <td  style="text-align: center;">1.52</td>
                        <td  style="text-align: center;">1.52</td>
                        <td  style="text-align: center;">0.00</td>
                      </tr>
                      <tr>
                        <td style="text-align: center;">碳酸钠</td>
                        <td  style="text-align: center;">吨</td>
                        <td  style="text-align: center;">0.00</td>
                        <td  style="text-align: center;">133.5</td>
                        <td  style="text-align: center;">7.5595</td>
                        <td  style="text-align: center;">-0.0595</td>
                        <td  style="text-align: center;">133.5000</td>
                        <td  style="text-align: center;">0.0000</td>
                        <td  style="text-align: center;">7.5000</td>
                        <td  style="text-align: center;">0.0136</td>
                        <td  style="text-align: center;">0.0124</td>
                        <td  style="text-align: center;">39.00</td>
                        <td  style="text-align: center;">1.52</td>
                        <td  style="text-align: center;">1.52</td>
                        <td  style="text-align: center;">0.00</td>
                      </tr>
                      <tr style="color: red">
                        <td style="text-align: center;">根据车间获取</td>
                        <td  style="text-align: center;">吨</td>
                        <td  style="text-align: center;">公式计算</td>
                        <td  style="text-align: center;">公式计算</td>
                        <td  style="text-align: center;">物流系统</td>
                        <td  style="text-align: center;">公式计算</td>
                        <td  style="text-align: center;">公式计算</td>
                        <td  style="text-align: center;">公式计算</td>
                        <td  style="text-align: center;">公式计算</td>
                        <td  style="text-align: center;">公式计算</td>
                        <td  style="text-align: center;">公式计算</td>
                        <td  style="text-align: center;">公式计算</td>
                        <td  style="text-align: center;">公式计算</td>
                        <td  style="text-align: center;">公式计算</td>
                        <td  style="text-align: center;">公式计算</td>
                      </tr>
                      </tbody>
                      <tbody style="color: #D2C172;text-align: center">
                      <tr>
                        <td style="text-align: center;">公摊公辅车间0.5Mpa蒸汽</td>
                        <td  style="text-align: center;">吨</td>
                        <td  style="text-align: center;">/</td>
                        <td  style="text-align: center;">/</td>
                        <td  style="text-align: center;">/</td>
                        <td  style="text-align: center;">/</td>
                        <td  style="text-align: center;">/</td>
                        <td  style="text-align: center;">22</td>
                        <td  style="text-align: center;">/</td>
                        <td  style="text-align: center;">0</td>
                        <td  style="text-align: center;">/</td>
                        <td  style="text-align: center;">/</td>
                        <td  style="text-align: center;">/</td>
                        <td  style="text-align: center;">/</td>
                        <td  style="text-align: center;">/</td>
                      </tr>
                      <tr>
                        <td style="text-align: center;">0.5Mpa蒸汽</td>
                        <td  style="text-align: center;">吨</td>
                        <td  style="text-align: center;">/</td>
                        <td  style="text-align: center;">/</td>
                        <td  style="text-align: center;">/</td>
                        <td  style="text-align: center;">/</td>
                        <td  style="text-align: center;">/</td>
                        <td  style="text-align: center;">3108</td>
                        <td  style="text-align: center;">/</td>
                        <td  style="text-align: center;">146</td>
                        <td  style="text-align: center;">/</td>
                        <td  style="text-align: center;">/</td>
                        <td  style="text-align: center;">/</td>
                        <td  style="text-align: center;">/</td>
                        <td  style="text-align: center;">/</td>
                      </tr>
                      <tr>
                        <td style="text-align: center;">0.5Mpa蒸汽</td>
                        <td  style="text-align: center;">吨</td>
                        <td  style="text-align: center;">/</td>
                        <td  style="text-align: center;">/</td>
                        <td  style="text-align: center;">/</td>
                        <td  style="text-align: center;">/</td>
                        <td  style="text-align: center;">/</td>
                        <td  style="text-align: center;">3130</td>
                        <td  style="text-align: center;">/</td>
                        <td  style="text-align: center;">146</td>
                        <td  style="text-align: center;">0.26</td>
                        <td  style="text-align: center;">0.29</td>
                        <td  style="text-align: center;">/</td>
                        <td  style="text-align: center;">/</td>
                        <td  style="text-align: center;">/</td>
                      </tr>
                      <tr>
                        <td style="text-align: center;">0.8Mpa蒸汽</td>
                        <td  style="text-align: center;">吨</td>
                        <td  style="text-align: center;">/</td>
                        <td  style="text-align: center;">/</td>
                        <td  style="text-align: center;">/</td>
                        <td  style="text-align: center;">/</td>
                        <td  style="text-align: center;">/</td>
                        <td  style="text-align: center;">2328</td>
                        <td  style="text-align: center;">/</td>
                        <td  style="text-align: center;">163</td>
                        <td  style="text-align: center;">0.64</td>
                        <td  style="text-align: center;">0.75</td>
                        <td  style="text-align: center;">/</td>
                        <td  style="text-align: center;">/</td>
                        <td  style="text-align: center;">/</td>
                      </tr>
                      <tr>
                        <td style="text-align: center;">交流电</td>
                        <td  style="text-align: center;">kwh</td>
                        <td  style="text-align: center;">/</td>
                        <td  style="text-align: center;">/</td>
                        <td  style="text-align: center;">/</td>
                        <td  style="text-align: center;">/</td>
                        <td  style="text-align: center;">/</td>
                        <td  style="text-align: center;">1689648</td>
                        <td  style="text-align: center;">/</td>
                        <td  style="text-align: center;">80610</td>
                        <td  style="text-align: center;">/</td>
                        <td  style="text-align: center;">/</td>
                        <td  style="text-align: center;">/</td>
                        <td  style="text-align: center;">/</td>
                        <td  style="text-align: center;">/</td>
                      </tr>
                      <tr>
                        <td style="text-align: center;">公摊公辅车间电</td>
                        <td  style="text-align: center;">kwh</td>
                        <td  style="text-align: center;">/</td>
                        <td  style="text-align: center;">/</td>
                        <td  style="text-align: center;">/</td>
                        <td  style="text-align: center;">/</td>
                        <td  style="text-align: center;">/</td>
                        <td  style="text-align: center;">811110</td>
                        <td  style="text-align: center;">/</td>
                        <td  style="text-align: center;">45865</td>
                        <td  style="text-align: center;">/</td>
                        <td  style="text-align: center;">/</td>
                        <td  style="text-align: center;">/</td>
                        <td  style="text-align: center;">/</td>
                        <td  style="text-align: center;">/</td>
                      </tr>
                      <tr>
                        <td style="text-align: center;" >用电量合计</td>
                        <td  style="text-align: center;" colspan="">kwh</td>
                        <td  style="text-align: center;">2500758
                        </td>
                        <td  style="text-align: center;">/</td>
                        <td  style="text-align: center;">126475
                        </td>
                        <td  style="text-align: center;">229.20
                        </td>
                        <td  style="text-align: center;">231.72
                        </td>
                        <td  style="text-align: center;">/</td>
                        <td  style="text-align: center;">/</td>
                        <td  style="text-align: center;">/</td>
                      </tr>
                      <tr>
                        <td style="text-align: center;">直流电</td>
                        <td  style="text-align: center;">kwh</td>
                        <td  style="text-align: center;">/</td>
                        <td  style="text-align: center;">/</td>
                        <td  style="text-align: center;">/</td>
                        <td  style="text-align: center;">/</td>
                        <td  style="text-align: center;">/</td>
                        <td  style="text-align: center;">23172037</td>
                        <td  style="text-align: center;">/</td>
                        <td  style="text-align: center;">1189923</td>
                        <td  style="text-align: center;">2156.38
                        </td>
                        <td  style="text-align: center;">2147.15
                        </td>
                        <td  style="text-align: center;">/</td>
                        <td  style="text-align: center;">/</td>
                        <td  style="text-align: center;">/</td>
                      </tr>
                      <tr>
                        <td style="text-align: center;">一次水</td>
                        <td  style="text-align: center;">吨</td>
                        <td  style="text-align: center;">/</td>
                        <td  style="text-align: center;">/</td>
                        <td  style="text-align: center;">/</td>
                        <td  style="text-align: center;">/</td>
                        <td  style="text-align: center;">/</td>
                        <td  style="text-align: center;">11672
                        </td>
                        <td  style="text-align: center;">/</td>
                        <td  style="text-align: center;">289
                        </td>
                        <td  style="text-align: center;">0.52

                        </td>
                        <td  style="text-align: center;">/
                        </td>
                        <td  style="text-align: center;">/</td>
                        <td  style="text-align: center;">/</td>
                        <td  style="text-align: center;">/</td>
                      </tr>
                      <tr>
                        <td style="text-align: center;">公摊公辅车间水</td>
                        <td  style="text-align: center;">吨</td>
                        <td  style="text-align: center;">/</td>
                        <td  style="text-align: center;">/</td>
                        <td  style="text-align: center;">/</td>
                        <td  style="text-align: center;">/</td>
                        <td  style="text-align: center;">/</td>
                        <td  style="text-align: center;">36102

                        </td>
                        <td  style="text-align: center;">/</td>
                        <td  style="text-align: center;">1619

                        </td>
                        <td  style="text-align: center;">2.93

                        </td>
                        <td  style="text-align: center;">/
                        </td>
                        <td  style="text-align: center;">/</td>
                        <td  style="text-align: center;">/</td>
                        <td  style="text-align: center;">/</td>
                      </tr>
                      <tr>
                        <td style="text-align: center;" >用水量合计</td>
                        <td  style="text-align: center;" colspan="">吨</td>
                        <td  style="text-align: center;">47774

                        </td>
                        <td  style="text-align: center;">/</td>
                        <td  style="text-align: center;">1908

                        </td>
                        <td  style="text-align: center;">3.46

                        </td>
                        <td  style="text-align: center;">4.43

                        </td>
                        <td  style="text-align: center;">/</td>
                        <td  style="text-align: center;">/</td>
                        <td  style="text-align: center;">/</td>
                      </tr>
                      <tr style="color: white">
                        <td style="text-align: center;" rowspan="2" >废水排430#</td>
                        <td  style="text-align: center;" colspan="" rowspan="2">m³</td>
                        <td  style="text-align: center;" colspan="7">日排污量

                        </td>
                        <td  style="text-align: center;" colspan="7">月排污量</td>

                      </tr>
                      <tr >
                        <td  style="text-align: center;" colspan="7">0

                        </td>
                        <td  style="text-align: center;" colspan="7">0</td>
                      </tr>
                      </tbody>
                    </table>

                  </el-main>
                </el-container>
              </el-col>

            </el-row>
          </el-main>
        <el-dialog
          :title="selftTitle"
          :visible.sync="selfVisual"
          width="70%"
         >
          <table style="width: 100%">
            <thead>
            <tr style="color: white;height: 40px">
              <th style="text-align: center;">序号</th>
              <th  style="text-align: center;">物料名称</th>
              <th  style="text-align: center;" >单位</th>
              <th  style="text-align: center;">数量</th>
              <th  style="text-align: center;">备注</th>
            </tr>
            </thead>
            <tbody style="color: #D2C172;text-align: center">
            <tr v-for="(item,index) in 10" style="height: 40px">
              <td>{{index+1}}</td>
              <td>32%烧碱</td>
              <td>吨</td>
              <td>937.67</td>
              <td >环保运行：36.07T，公辅：1.29T，蒽醌：T</td>
            </tr>
            <tr style="height: 40px">
              <td>合计</td>
              <td>32%烧碱</td>
              <td>吨</td>
              <td >937.67</td>
              <td >/</td>
            </tr>
            </tbody>
          </table>

        </el-dialog>
        <el-dialog
          :title="monthSaleTitle"
          :visible.sync="monthSaleVisual"
          width="70%"
        >
          <table style="width: 100%">
            <thead>
            <tr style="color: white;height: 40px">
              <th style="text-align: center;">序号</th>
              <th  style="text-align: center;">物料名称</th>
              <th  style="text-align: center;" >单位</th>
              <th  style="text-align: center;">销售数量</th>
              <th  style="text-align: center;">销售日期</th>
              <th  style="text-align: center;">车辆数量</th>
              <th  style="text-align: center;">出货吨数</th>
              <th  style="text-align: center;">管道运输数量</th>
            </tr>
            </thead>
            <tbody style="color: #D2C172;text-align: center">
            <tr v-for="(item,index) in 10" style="height: 40px">
              <td>{{index+1}}</td>
              <td>32%烧碱</td>
              <td>吨</td>
              <td>937.67</td>
              <td>2025-03-{{index+1}}</td>
              <td >{{index+20}}</td>
              <td >{{index+20}}</td>
              <td >{{index+20}}</td>
            </tr>
            <tr v-for="(item,index) in 10" style="height: 40px">
              <td>{{index+11}}</td>
              <td>32%烧碱</td>
              <td>吨</td>
              <td>937.67</td>
              <td>2025-03-{{index+11}}</td>
              <td >{{index+20}}</td>
              <td >{{index+20}}</td>
              <td >{{index+20}}</td>
            </tr>
            <tr v-for="(item,index) in 10" style="height: 40px">
              <td>{{index+21}}</td>
              <td>32%烧碱</td>
              <td>吨</td>
              <td>937.67</td>
              <td>2025-03-{{index+21}}</td>
              <td >{{index+20}}</td>
              <td >{{index+20}}</td>
              <td >{{index+20}}</td>
            </tr>
            <tr style="height: 40px">
              <td>合计</td>
              <td>32%烧碱</td>
              <td>吨</td>
              <td >937.67</td>
              <td >/</td>
              <td >40</td>
              <td >80</td>
              <td >80</td>
            </tr>
            </tbody>
          </table>

        </el-dialog>
        <el-dialog
          :title="monthProTitle"
          :visible.sync="monthProVisual"
          width="70%"
        >
          <table style="width: 100%">
            <thead>
            <tr style="color: white;height: 40px">
              <th style="text-align: center;">序号</th>
              <th  style="text-align: center;">物料名称</th>
              <th  style="text-align: center;" >单位</th>
              <th  style="text-align: center;">生产数量</th>
              <th  style="text-align: center;">生产日期</th>
            </tr>
            </thead>
            <tbody style="color: #D2C172;text-align: center">
            <tr v-for="(item,index) in 10" style="height: 40px">
              <td>{{index+1}}</td>
              <td>32%烧碱</td>
              <td>吨</td>
              <td>937.67</td>
              <td>2025-03-{{index+1}}</td>


            </tr>
            <tr v-for="(item,index) in 10" style="height: 40px">
              <td>{{index+11}}</td>
              <td>32%烧碱</td>
              <td>吨</td>
              <td>937.67</td>
              <td>2025-03-{{index+11}}</td>


            </tr>
            <tr v-for="(item,index) in 10" style="height: 40px">
              <td>{{index+21}}</td>
              <td>32%烧碱</td>
              <td>吨</td>
              <td>937.67</td>
              <td>2025-03-{{index+21}}</td>
            </tr>
            <tr style="height: 40px">
              <td>合计</td>
              <td>32%烧碱</td>
              <td>吨</td>
              <td >937.67</td>
              <td >/</td>
            </tr>
            </tbody>
          </table>

        </el-dialog>

      </el-container>
</template>

<script>
  export default {
    name: 'index',
    data() {
      return {
        radio1:"",
        radio2:"",
        selfVisual:false,
        selftTitle:"",
        monthSaleTitle:"",
        monthSaleVisual:false,
        monthProTitle:"",
        monthProVisual:false
      }
    },
    methods:{
      selectSelf(){
         this.selftTitle="32%液碱本月本厂使用情况";
         this.selfVisual=true;
      },
      monthSale(){
        this.monthSaleTitle="32%液碱本月销售情况"
         this.monthSaleVisual=true;
      },
      monthPro(){
          this.monthProTitle="32%液碱本月生产数量";
          this.monthProVisual=true;
      }
    }
  }
</script>

<style scoped>
  .panal{
    width: 100%;
    height: 100%;
    background: url("../../../assets/bi/imgs/panel.png") no-repeat center;
    background-size: 100% 100%;
  }
  table, th, td {
    border: 1px solid #368AB6;
    border-collapse: collapse;
  }

</style>
